<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新闻动态</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="alternate icon" type="img/hengwang-1.png" href="img/hengwang-1.png">
    <link rel="stylesheet" href="css/amazeui.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="../manager/js/jquery-3.6.0.min.js"></script>
    <style>
        .page li {
            display: inline-block;
            border: 1px solid #ccc;
            width: 25px;
            height: 25px;
            margin: 0px 3px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
        }

        .page li:hover {
            background-color: #f1f1f1;
        }

        .page-active {
            background-color: #1A73E8;
        }
    </style>
</head>
<body>
<header class="am-topbar header">
    <div class="am-container-1">
        <div class="left hw-logo">
            <img class=" logo" src="img/HENGWANG.png"></img>
            <img class="word" src="img/hw-word.png"></img>
        </div>
        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
                data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
                class="am-icon-bars"></span></button>
        <div class="am-collapse am-topbar-collapse right" id="doc-topbar-collapse">
            <div class=" am-topbar-left am-form-inline am-topbar-right" role="search">
                <ul class="am-nav am-nav-pills am-topbar-nav hw-menu">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="solutions.html">解决方案</a></li>
                    <li><a href="product-show.html">产品展示 </a></li>
                    <li><a href="customer-case.html">客户案例</a></li>
                    <li><a href="service-center.html">服务中心 </a></li>
                    <li class="hw-menu-active"><a href="news.html">新闻动态 </a></li>
                    <li><a href="about-us.html">关于我们</a></li>
                    <li><a href="recruit.html">招贤纳士 </a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="toppic">
    <div class="am-container-1">
        <div class="toppic-title left">
            <i class="am-icon-newspaper-o toppic-title-i"></i>
            <span class="toppic-title-span">新闻动态</span>
            <p>Hengwang News</p>
        </div>
        <div class="right toppic-progress">
            <span><a href="index.html" class="w-white">首页</a></span>
            <i class=" am-icon-arrow-circle-right w-white"></i>
            <span><a href="news.html" class="w-white">新闻动态</a></span>
        </div>
    </div>
</div>
<div class="am-container-1 news-content-all">
    <div class="left am-u-sm-12 am-u-md-8 am-u-lg-9 ">
        <ul class="news-ul" id="newsUl"></ul>
        <div id="page">
            <ul class="am-pagination " id="page-bar"></ul>
        </div>
        <script>
            function loadList(page) {
                page = page == undefined ? 1 : page;
                $.ajax({//回显用户信息
                    async: false,//同步
                    data: {op: "queryByPage", page: page, size: 6},
                    success: function (data) {
                        var newsUl = $("#newsUl");
                        newsUl.empty();
                        for (let i = 0; i < data.rows.length; i++) {
                            var p = data.rows[i];
                            newsUl.append(`<li class="am-u-sm-12 am-u-md-6 am-u-lg-4 ">
        <a href="news-inform.html">
            <div class="news-ul-liall">
                <img class="news-ul-liimg" src="${p.newsImg}"/>
                <div class="inform-list">
                    <div class="inform-list-date"><i class="am-icon-arrow-circle-right"></i>${p.createTime}</div>
                    <div class="inform-list-label"><i class="am-icon-arrow-circle-right"></i>${p.newsKeyword}</div>
                    <div class="inform-list-numb"><i class="am-icon-arrow-circle-right"></i>${p.newsClickCount}</div>
                </div>
                <span>${p.newsTitle}</span>
                <p>${p.newsDesc}</p>
                <span class="see-more3">查看更多<i class="am-icon-angle-double-right"></i></span>
            </div>
        </a>
    </li>`);
                        }
                        var pageBar = $("#page-bar");
                        pageBar.empty();
                        pageBar.append("<li onclick='loadList(" + ((page - 1) < 1 ? 1 : (page - 1)) + ")'>&lt;&lt;</li>");
                        // 计算要显示的最大的页码
                        var start = 1;
                        var end = 1;
                        if (data.maxPage <= 10) {
                            end = data.maxPage;
                        } else if (data.maxPage > 10) {
                            start = (data.page - 4) > 0 ? (data.page - 4) : 1;
                            end = (start + 9) > data.maxPage ? data.maxPage : (start + 9);
                        }
                        // 显示其它页
                        for (var x = start; x <= end; x++) {
                            if (x == data.page) {
                                pageBar.append("<li class='page-active' >" + x + "</li>");
                            } else {
                                pageBar.append("<li onclick='loadList(" + x + ")'>" + x + "</li>");
                            }
                        }
                        pageBar.append("<li onclick='loadList(" + ((page + 1) > data.maxPage ? data.maxPage :
                            (page + 1)) + ")'>&gt;&gt;</li>");
                    },
                    type: "GET",
                    url: "/web/news"
                });
            }

            loadList(1);
        </script>
    </div>
    <div class="left am-u-sm-12 am-u-md-4 am-u-lg-3">
        <section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{  }'>
            <div class="hot-title"><i class="am-icon-thumbs-o-up"></i>热门新闻 / Hot News</div>
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">
                    用户体验制作当中的一些可视化信息
                </dt>
                <dd class="am-accordion-bd am-collapse am-in">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        英特网，是网络与网络之间所串连成的庞大网络网又称网际网路或音译因特网、英特网，是网络与网络之间所串连成的庞大网络网络与网络之
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">
                    可视化信息
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        英特网，是网络与网络之间所串连成的庞大网络网所串连成的庞大网络网
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">
                    响应式购物商城
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        英特网，是网络与网络之间所串连成的庞大网络网所串连成的庞大网络网
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">
                    可视化信息
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        英特网，是网络与网络之间所串连成的庞大网络网所串连成的庞大网络网
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">
                    响应式购物商城
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
                    <div class="am-accordion-content">
                        英特网，是网络与网络之间所串连成的庞大网络网所串连成的庞大网络网
                    </div>
                </dd>
            </dl>
        </section>
    </div>
    <div class="clear"></div>
</div>
<footer class="footer ">
    <ul>
        <li class="am-u-lg-4 am-u-md-4 am-u-sm-12 part-5-li2">
            <div class="part-5-title">联系我们</div>
            <div class="part-5-words2">
                <span id="address1">地址:武汉市洪山区街道口鹏程国际B座2511</span>
                <span id="moblie1">电话:18238765101</span>
                <span id="fax1">传真:(123) 456-7890</span>
                <span id="email1">邮箱:support@vectorlab.com</span>
                <span><i class="am-icon-phone"></i><em id="fixed1">027-82671661</em></span>
            </div>
        </li>
        <li class="am-u-lg-4 am-u-md-4 am-u-sm-12 ">
            <div class="part-5-title">相关链接</div>
            <div class="part-5-words2">
                <ul class="part-5-words2-ul">
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="solutions.html">解决方案</a></li>
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="product-show.html">产品展示</a></li>
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="customer-case.html">客户案例</a></li>
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="service-center.html">服务中心</a></li>
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="about-us.html">关于我们</a></li>
                    <li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="recruit.html">招贤纳士</a></li>
                    <div class="clear"></div>
                </ul>
            </div>
        </li>
        <div class="clear"></div>
    </ul>
</footer>
<script>
    $(function () {
        $.get("/web/aboutInfo", {op: "query"}, function (data) {
            $("#img1").attr("src", data.aboutImg1);
            $("#img2").attr("src", data.aboutImg2);
            $("#img3").attr("src", data.aboutImg3);
            $("#img4").attr("src", data.aboutImg4);
            $("#img5").attr("src", data.aboutImg5);
            $("#address").text(data.address);
            $("#moblie").text(data.mobliePhone);
            $("#fax").text(data.fax);
            $("#email").text(data.email);
            $("#fixed").text(data.fixedPhone);
            $("#imgAddress").attr("src", data.addressImg);
            $("#desc").text(data.aboutDetails);
            $("#address1").text(data.address);
            $("#moblie1").text("电话:"+data.mobliePhone);
            $("#fax1").text(data.fax);
            $("#email1").text(data.email);
            $("#fixed1").text(data.fixedPhone);
        });
    })
</script>
</body>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery.min.js"></script>
<!--<![endif]-->
<script src="js/amazeui.min.js"></script>
</html>
